I am developing a web application using Vue.js. I have a data entry form with 5 fields. The business need is on tab keypress, it should focus the first Input box and on subsequent tabs the next next element should be focused. I have archived using tabindex property to the elements.
Now the issue that I'm facing is after the form elements are over and when we hit tab it goes to the other elements where tabindex is not defined such as links and Browsers' URL bar.
What I want is if I have 6 elements (5 textbox + 1 submit button) and I have set tabindex from 1 to 6 than again after tab at element with tabindex 6 it should again focus on tabindex 1 and ignore other links and buttons on webpage.
You can focus elements without the use of tabindex.
Vue.js allows to select DOM elements with this kind of syntax this.$refs.name
(and if it doesn't work you can try this.$el.querySelector('yourElementSelector')
After selecting the element you can add focus() to it.
For instance this.$refs.name.focus();
At your specific case, you can add this.$refs.name.focus() after an onclick event on the tab.
That will focus the element right after the click
You can prevent the focus outside tabIndex by place an empty span at the end of the last index element. Give it an id with tabindex = 0 along with an onfocus event, On trigger it help to focus to the first tabindex element.
<span tabindex="0" id="prevent-outside-focus" onfocus="foucsFirstTabIndex()"></span>
Live Demo :
new Vue({
el: '#app',
mounted() {
document.getElementById('field1').focus();
},
methods: {
foucsFirstTabIndex() {
document.getElementById("field1").focus();
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" id="field1" tabindex="1"/><br>
<input type="text" id="field2" tabindex="2"/><br>
<input type="text" id="field3" tabindex="3"/><br>
<input type="text" id="field4" tabindex="4"/><br>
<button id="button" tabindex="5">Submit</button>
<span tabindex="0" id="prevent-outside-focus" @focus="foucsFirstTabIndex()"></span>
</div>FYI - This is @RohitJindal's Vue 2 answer using Vue 3 Composition API
Modified so shift-tab on the first element moves to the last
Note: you'll need to renumber your tabindexes if you want to do it like this
const { createApp, onMounted } = Vue;
createApp({
setup() {
const focusFirst = () => {
document.querySelector('[tabindex="2"]').focus();
}
const focusLast = () => {
document.querySelector('[tabindex="6"]').focus();
}
onMounted(focusFirst);
return { focusFirst, focusLast};
}
}).mount('#app');<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
<div id="app">
<span tabindex="1" @focus="focusLast"></span>
<input type="text" tabindex="2"/><br>
<input type="text" tabindex="3"/><br>
<input type="text" tabindex="4"/><br>
<input type="text" tabindex="5"/><br>
<button id="button" tabindex="6">Submit</button>
<span tabindex="7" @focus="focusFirst"></span>
</div>